<template>
    <div>
        <Header titleText="窗口退号" />
        <el-divider/>
        <div class="ly-filter">
            <el-input 
                placeholder="请输入患者病历号" 
                v-model="searchValue.caseNumber" 
                clearable >
            </el-input>
            <el-input 
                placeholder="请输入患者姓名" 
                v-model="searchValue.realName" 
                clearable >
            </el-input>
            <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <el-table :data="tableData.records" border>
            <el-table-column label="编号">
                <template #default="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="患者病历号" prop="caseNumber"></el-table-column>
            <el-table-column label="患者姓名" prop="realName" show-overflow-tooltip></el-table-column>
            <el-table-column label="性别" prop="gender">
                <template #default="scope">
                    <span>{{scope.row.gender == 1 ? '男' : '女'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="身份证号" prop="cardNumber" show-overflow-tooltip></el-table-column>
            <el-table-column label="付款方式" prop="registMethod"></el-table-column>
            <el-table-column label="操作"><!--  可在里面加入这个固定操作栏宽度width="140px"-->
                <template #default="scope">
                    <!-- <template v-if="scope.row.visitState === 3"> -->
                     <el-button 
                            type="primary" 
                            size="small" 
                            plain 
                            @click="update(scope.row.caseNumber)">退号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination 
            style="margin-top: 10px;" 
            background 
            :total="tableData.total" 
            v-model:page-size="params.pageSize"
            v-model:current-page="params.pageNo"
            @change="getTableData">
        </el-pagination>
    </div>
</template>

<script setup>
import Header from '@/components/doctor/header';
import { _axios, get ,post} from '@/utils/axios';
import { onMounted, reactive, ref } from 'vue';
import 'element-plus/dist/index.css'

const searchValue = ref({
    caseNumber: '',
    realName: ''
})
//定义变量不能使用var
const tableData = reactive({
    records: [],
    pages: 0,
    total: 0
})
const params = reactive({
    pageNo: 1,
    pageSize: 3,
    caseNumber: '',
    realName: ''
})
onMounted(() => {
    getTableData()
})
function getTableData() {
    get('/register/getHistoryRegister', params , content => {
        console.log('getHistoryRegister',content)
        tableData.records = content.records
        tableData.pages = content.pages
        tableData.total = content.total
    })
}

//搜索功能
function search(){
    params.pageNo = 1
    params.caseNumber = searchValue.value
    params.realName = searchValue.value
    getTableData()
}
function update(caseNumber){
    post('/register/cancelRegister',{caseNumber:caseNumber} , content => {
        console.log('updateRegister',content)
        getTableData()
    })
}
</script>

<style lang="scss" scoped>

</style>